<template>
  <view>
    <uv-sticky :custom-nav-height="0">
      <view class="pb-40rpx top-block">
        <mt-navbar
          title="我的返佣"
          :fixed="false"
          :placeholder="false"
          bg-color="rgba(0,0,0,0)"
          left-icon-color="#ffffff"
          :title-style="{ color: '#ffffff' }"
        >
          <template #right>
            <view class="flex items-center" @click="goHistory">
              <text class="text-24rpx text-#ffffff">提现记录</text>
            </view>
          </template>
        </mt-navbar>
        <view class="py-40rpx">
          <view class="px-32rpx text-28rpx text-#FFFFFF mb-22rpx">可提现佣金</view>
          <view class="flex items-center justify-between pl-32rpx">
            <text class="text-62rpx text-#FFFFFF">{{ amountTransfer(userInfo.commissionAmount, 2, true) }}</text>
            <view
              class="h-54rpx flex items-center pl-20rpx pr-32rpx bg-[rgba(255,255,255,0.1)]"
              style="border-radius: 40rpx 0 0 40rpx"
              @click="goApplyWithdrawal"
            >
              <image class="w-32rpx h-32rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-commission1.svg"></image>
              <text class="text-24rpx text-#ffffff ml-8rpx">去提现</text>
            </view>
          </view>
        </view>
      </view>

      <view class="flex items-center bg-#ffffff">
        <view class="flex-1 min-w-0 h-44px">
          <uv-tabs
            v-if="showTabs"
            :list="tabList"
            :current="currentTab"
            :active-style="{ color: '#1484EE', fontWeight: 'bold' }"
            :inactive-style="{ color: '#727687' }"
            line-width="32"
            line-color="#1484EE"
            @click="tabsChange"
          ></uv-tabs>
        </view>
        <view v-show="currentTab === 1" class="text-28rpx text-#727687 pr-32rpx">
          共返佣￥{{ amountTransfer(detailInfo.completeAllAmount, 2, true) }}
        </view>
      </view>
    </uv-sticky>

    <view class="mt-10rpx pb-20rpx">
      <view v-for="(item, index) in dataList" :key="index" class="px-32rpx">
        <view class="flex items-center justify-between pt-24rpx">
          <view class="text-28rpx text-#727687">{{ item.providerCommissionDate }}</view>
          <view v-show="currentTab === 1" class="text-28rpx text-#EFB339">￥{{ amountTransfer(item.completeAmount, 2, true) }}</view>
        </view>
        <template v-if="item.detail?.clueList">
          <view v-for="son in item.detail.clueList" :key="son.id" class="mt-24rpx bg-#ffffff rd-8rpx p-32rpx">
            <view class="flex items-start mb-32rpx">
              <view class="flex-1 min-w-0 text-32rpx text-#1C213E font-bold break-all">{{ son.clueNo }}</view>
              <text class="ml-32rpx px-16rpx py-6rpx text-28rpx text-#007BFF bg-[rgba(0,123,255,0.1)] rd-4rpx">线索返佣</text>
            </view>
            <view v-show="currentTab === 0" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">签约时间：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.transferTime }}</view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">返佣时间：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.completeTime }}</view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">返佣金额：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#EFB339 font-bold break-all">￥{{ amountTransfer(son.rebateAmount, 2, true) }}</view>
            </view>
          </view>
        </template>
        <template v-if="item.detail?.activityList">
          <view v-for="son in item.detail.activityList" :key="son.id" class="mt-24rpx bg-#ffffff rd-8rpx p-32rpx">
            <view class="flex items-start mb-32rpx">
              <view class="flex-1 min-w-0 text-32rpx text-#1C213E font-bold break-all">{{ son.activityName }}</view>
              <text class="ml-32rpx px-16rpx py-6rpx text-28rpx text-#F7775C bg-[rgba(247,119,92,0.1)] rd-4rpx">活动返佣</text>
            </view>
            <view class="flex items-start mb-16rpx">
              <view class="w-170rpx text-28rpx text-#727687">已报名签到：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.signInNum }}人</view>
            </view>
            <view v-show="currentTab === 0" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">创建时间：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.createTime }}</view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">返佣时间：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.signInTime }}</view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">返佣金额：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#EFB339 font-bold break-all">￥{{ amountTransfer(son.inviteRebateAmount, 2, true) }}</view>
            </view>
          </view>
        </template>
        <template v-if="item.detail?.takeOrderList">
          <view v-for="son in item.detail.takeOrderList" :key="son.id" class="mt-24rpx bg-#ffffff rd-8rpx p-32rpx">
            <view class="flex items-start mb-32rpx">
              <view class="flex-1 min-w-0 text-32rpx text-#1C213E font-bold break-all">{{ son.clueNo }}</view>
              <text class="ml-32rpx px-16rpx py-6rpx text-28rpx text-#007BFF bg-[rgba(0,123,255,0.1)] rd-4rpx">邀约返佣</text>
            </view>
            <view v-show="currentTab === 0" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">签约时间：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.transferTime }}</view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start mb-16rpx line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">返佣时间：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">{{ son.completeTime }}</view>
            </view>
            <view v-show="currentTab === 1" class="flex items-start line-height-28rpx">
              <view class="w-170rpx text-28rpx text-#727687">返佣金额：</view>
              <view class="flex-1 min-w-0 text-28rpx text-#EFB339 font-bold break-all">￥{{ amountTransfer(son.rebateAmount, 2, true) }}</view>
            </view>
          </view>
        </template>
      </view>
      <view v-if="!dataList.length" class="pt-200rpx">
        <mt-empty-view></mt-empty-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { providerCommissiongetProviderCommissionListApp, providerCommissiongetProviderCommissionCount } from '@/subCommission/api/index';
import { getProvinceInfo } from '@/api/index.js';
import { amountTransfer } from '@/utils/tools';
import userStore from '@/store/user';
const user = userStore();

const tabList = ref([
  {
    name: '待返佣',
    type: 0,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#1484EE'
    }
  },
  {
    name: '已返佣',
    type: 1,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  }
]);
// 当前选中的 tab 索引
const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  currentTab.value = e.index;
  for (let item of tabList.value) {
    item.badge.color = '#727687';
  }

  tabList.value[e.index].badge.color = '#1484EE';
  getData();
  getNum();
}

function goHistory() {
  uni.navigateTo({
    url: '/subCommission/pages/withdrawalHistory'
  });
}

function goApplyWithdrawal() {
  uni.navigateTo({
    url: '/subCommission/pages/applyWithdrawal'
  });
}

const userInfo = ref({});
function getUserInfo() {
  getProvinceInfo().then((res) => {
    userInfo.value = res.data;
    user.setUserInfo(res.data);
  });
}

const showTabs = ref(false);
function getNum() {
  showTabs.value = false;
  providerCommissiongetProviderCommissionCount({ type: 2 }).then((res) => {
    tabList.value.map((i) => {
      res.data.map((x) => {
        if (i.type == x.rebateStatus) {
          i.badge.value = x.count;
        }
      });
    });
    setTimeout(() => {
      showTabs.value = true;
    }, 100);
  });
}

const detailInfo = ref({
  completeAllAmount: 0,
  processAllmount: 0
});
const dataList = ref([]);
function getData() {
  providerCommissiongetProviderCommissionListApp({
    type: 2,
    rebateStatus: tabList.value[currentTab.value].type
  }).then((res) => {
    detailInfo.value.completeAllAmount = res.data.completeAllAmount;
    detailInfo.value.processAllmount = res.data.processAllmount;

    const arr = res.data?.list || [];
    for (const item of arr) {
      const l = item.providerCommissionDate.split('-');
      item.providerCommissionDate = `${l[0]}年${l[1]}月`;
    }
    dataList.value = arr;
  });
}

onLoad(() => {
  getData();
  getNum();
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#1484EE'
  });
});

onShow(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.top-block {
  background-image: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/back-commission-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
